<template>
	<tm-sheet :margin="[32]" :round="3" :shadow="2">
		<view class="zk_view_state">
			<view class="zk_view_left">{{content.label}}</view>
			<view class="zk_view_hd">{{content.type}}</view>
			<view class="zk_view_right">{{content.state}}</view>
		</view>
	</tm-sheet>
</template>
		
<script lang="ts" setup>
	import { ref, watch, reactive } from 'vue'
	const props = defineProps({
	  label: String,
	  type: String,
	  state: String,
	})
	const content = reactive({
		label: props.label,
		type: props.type,
		state: props.state
	})
  watch(
      () => props.label,
      (newVal) => {
        content.label = newVal
      }
  )
  watch(
      () => props.type,
      (newVal) => {
        content.type = newVal
      }
  )
  watch(
      () => props.state,
      (newVal) => {
        content.state = newVal
      }
  )
	
</script>
<style lang="scss" scoped>
	.zk_view_state{
		display: flex;
		font-size: $cus-font-size-16;
		justify-content: space-between;
		.zk_view_left{
			color: $cus-color-1;
	
		}
		.zk_view_hd{
			color: $cus-color-4;
			font-size: $cus-font-size-14;
		}
		.zk_view_right{
			color: $cus-color-3;
			font-weight: $cus-font-weight-600;
		}
	}
</style>